<template>
  <div v-show="list.length">
      <div class="list-control">
        <div class="list-control-order">
          <span>排序：</span>
          <span class="list-control-order-item" :class="{on: order === ''}"
                @click="handleOrderDefault">默认
          </span>
          <span class="list-control-order-item" :class="{on: order === 'sales'}"
                @click="handleOrderSales">销量
            <template v-if="order === 'sales'">↓</template>
          </span>
          <span class="list-control-order-item" :class="{on: order.indexOf('cost') > -1}"
                @click="handleOrderCost">价格
            <template v-if="order === 'cost-asc'">↑</template>
            <template v-if="order === 'cost-desc'">↓</template>
          </span>
        </div>
        <div class="list-control-filter">
          <span>品牌：</span>
          <span class="list-control-filter-item" :class="{on: filterBrand.has(item)}"
            v-for="item in brands" @click="handleFilterBrand(item)">
            {{ item }}
          </span>
        </div>
        <div class="list-control-filter">
          <span>颜色：</span>
          <span class="list-control-filter-item" :class="{on: filterColor.has(item)}"
            v-for="item in colors" @click="handleFilterColor(item)">
            {{ item }}
          </span>
        </div>
      </div>
    <product v-for="item in filteredAndOrderedList()" :info="item" :key="item.id"></product>
  </div>
</template>
<script>
  import Product from '../components/product.vue';
  export default {
    components: {Product},
    data() {
      return {
        order: '',
        filterBrand: new Set(),
        filterColor: new Set()
      }
    },
    computed: {
      list() {
        return this.$store.state.productList;
      },
      brands() {
        return this.$store.getters.brands;
      },
      colors() {
        return this.$store.getters.colors;
      },

    },
    methods: {
      filteredAndOrderedList() {
        let list = [...this.list];
        if (this.filterBrand.size > 0) {
          list = list.filter(item => this.filterBrand.has(item.brand));
        }
        if (this.filterColor.size > 0) {
          list = list.filter(item => this.filterColor.has(item.color));
        }
        if (this.order !== '') {
          if (this.order === 'sales') {
            list = list.sort((a, b) => b.sales - a.sales);
          } else if (this.order === 'cost-desc') {
            list = list.sort((a, b) => b.cost - a.cost);
          } else if (this.order === 'cost-asc') {
            list = list.sort((a, b) => a.cost - b.cost);
          }
        }
        return list;
      },
      handleOrderDefault() {
        this.order = '';
      },
      handleOrderSales() {
        this.order = 'sales';
      },
      handleOrderCost() {
        if (this.order === 'cost-desc') {
          this.order = 'cost-asc';
        } else {
          this.order = 'cost-desc';
        }
      },
      handleFilterBrand(brand) {
        if (this.filterBrand.has(brand)) {
          this.filterBrand.delete(brand);
        } else {
          this.filterBrand.add(brand);
        }
        //因为set的变动vue无法检测，只能强制更新
        this.$forceUpdate();
      },
      handleFilterColor(color) {
        if (this.filterColor.has(color)) {
          this.filterColor.delete(color);
        } else {
          this.filterColor.add(color);
        }
        //因为set的变动vue无法检测，只能强制更新
        this.$forceUpdate();
      }
    },
    mounted() {
      this.$store.dispatch('getProductList');
    }
  }

</script>
<style scoped>
  .list-control{
    background: #fff;
    border-radius: 6px;
    margin: 16px;
    padding: 16px;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
  }
  .list-control-filter{
    margin-bottom: 16px;
  }
  .list-control-filter-item,
  .list-control-order-item {
    cursor: pointer;
    display: inline-block;
    border: 1px solid #e9eaec;
    border-radius: 4px;
    margin-right: 6px;
    padding: 2px 6px;
  }
  .list-control-filter-item.on,
  .list-control-order-item.on{
    background: #f2352e;
    border: 1px solid #f2352e;
    color: #fff;
  }
  .product-not-found{
    text-align: center;
    padding: 32px;
  }
</style>
